/*
*   @Author: 1296
*   @Date: 2025-03-23
*   @Description: 分享图
*/

<template>
  <div class="profile-share">
    <!-- 分享按钮 -->
    <button class="share-trigger" @click="toggleShareMenu">
      <svg-icon name="share" />
      {{ $t('shareProfile') }}
    </button>

    <!-- 分享菜单 -->
    <transition name="slide-fade">
      <div v-if="showShareMenu" class="share-menu">
        <!-- 仅保留图片生成区域 -->
        <div class="share-section">
          <button
              class="export-button"
              @click="exportImage"
              :disabled="isGenerating"
          >
            <span v-if="!isGenerating">🖼️ {{ $t('exportImage') }}</span>
            <span v-else>⏳ {{ $t('generating') }}...</span>
          </button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';

export default {
  props: {
    username: {
      type: String,
      required: true,
      default: () => ''
    }
  },
  data() {
    return {
      showShareMenu: false,
      isGenerating: false
    };
  },
  computed: {
    processedUsername() {
      const username = this.username ||
          sessionStorage.getItem('username') ||
          'guest';
      return username.trim() || 'guest';
    }
  },
  methods: {
    toggleShareMenu() {
      if (!this.processedUsername) {
        this.$toast.error(this.$t('userNotLoggedIn'));
        return;
      }
      this.showShareMenu = !this.showShareMenu;
    },

    async exportImage() {
      if (!this.processedUsername) return;

      this.isGenerating = true;
      try {
        const element = document.querySelector('.my-profile');
        const canvas = await html2canvas(element, {
          useCORS: true,
          logging: true,
          scale: window.devicePixelRatio * 2,
          backgroundColor: '#ffffff',
          onclone: (clonedDoc) => {
            clonedDoc.querySelector('.profile-share').style.display = 'none';
          }
        });

        const link = document.createElement('a');
        link.download = `${this.processedUsername}_profile.png`;
        link.href = canvas.toDataURL('image/png');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } catch (error) {
        console.error('Export error:', error);
        this.$toast.error(this.$t('exportFailed'));
      } finally {
        this.isGenerating = false;
      }
    }
  },
  watch: {
    username: {
      immediate: true,
      handler(newVal) {
        if (!newVal && this.showShareMenu) {
          this.showShareMenu = false;
        }
      }
    }
  }
};
</script>

<style scoped>
.profile-share {
  position: relative;
  margin-top: 2rem;
}

.share-trigger {
  background: #2196F3;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.share-trigger:hover {
  background: #1976D2;
  transform: translateY(-2px);
}

.share-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  background: white;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 200px;
  z-index: 100;
}

.export-button {
  width: 100%;
  padding: 10px;
  background: #FF9800;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}

.export-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}

@media (max-width: 480px) {
  .share-menu {
    width: 180px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>